<template>
  <div>
    <el-form :inline="true" :model="formInline" class="demo-form-inline" @keyup.enter.native="search()">
      <el-form-item label="问题编号"><br> <br><el-input v-model="formInline.faqNo" placeholder clearable style="margin-left:-60px;width:200px"></el-input></el-form-item>
      <el-form-item label="问题名称"><br> <br><el-input v-model="formInline.faqName" placeholder clearable style="margin-left:-60px;width:200px"></el-input></el-form-item>
     
      <el-form-item style="margin-left:700px;text-align:right"><el-button type="primary" @click="search()" size="mini" icon="el-icon-search">查询</el-button>
     <el-button type="primary" @click="kong()" size="mini" icon="el-icon-delete">清空</el-button>
      <el-button type="primary" @click="toAdd()" icon="el-icon-edit" size="mini">新增</el-button></el-form-item>
    </el-form>
    <el-table
      :data="tableData"
      style="width: 100%;margin-bottom: 20px;"
      border
      :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
      v-loading="loading"
    >
      <el-table-column type="index" label="序号" align="center" width="60" ></el-table-column> 
 
      <el-table-column prop="faqNo" label="问题编号" width align="left" show-overflow-tooltip></el-table-column>
<el-table-column prop="faqName" label="问题名称" width align="left"></el-table-column> 
 <!-- <el-table-column prop="faqContent" label="问题内容" width align="left"></el-table-column>  -->
 
      <el-table-column prop="remark" label="备注" width align="left" show-overflow-tooltip></el-table-column>
  <el-table-column prop="createTime" label="创建时间" width align="left"></el-table-column> 
 
 
      <el-table-column prop="faqNum" label="
展示顺序" width align="left" show-overflow-tooltip></el-table-column>
      <el-table-column label="操作" width="280" align="center">
        <template slot-scope="scope">
              <el-button type="text" size="mini" @click="seedetail(scope.row)">查看详情</el-button>
          <el-button type="text" size="mini" @click="toEdit(scope.row)">编辑</el-button>
          <el-button type="text" size="mini" @click="handledelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- <pre style="text-align: left">
      {{dropCol}}
    </pre>
    <hr>
    <pre style="text-align: left">
      {{tableData}}
    </pre> -->
    <!-- </el-table> -->
    <el-form :inline="true" :model="formInline"><el-form-item style="margin-top: 6px;"></el-form-item></el-form>
    <div class="block" style="margin-top:-49px">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[10, 20, 30, 50, 100]"
        :current-page="listQuery.current"
        :page-size="listQuery.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>

    <el-dialog :visible.sync="dialogVisibleImg"><img width="100%" :src="dialogImageUrl" alt /></el-dialog>
  </div>
</template>

<script>
import Sortable from 'sortablejs';
import { queryPrize, addPrize, deletePrize, updatePrize } from '@/api/commonproblem';
import imageUpload from '@/page/common/Image-upload';
import qs from 'qs';
export default {
  data() {
    return {
      tableData: [],
      loading: true,
      disabled: false,
      flag: true,
     
      total: 0,
      listQuery: {
        current: 1,
        size: 100
      },
      dialogVisibleImg: false,
      dialogImageUrl: '',
      formInline: {
        faqNo: '',
        faqName: '',
   
      },
      rules: {}
    };
  },
  mounted() {
    this.getDataList();
    document.body.ondrop = function(event) {
      event.preventDefault();
      event.stopPropagation();
    };
    // this.rowDrop()
    // this.columnDrop();
  },
  components: {
    imageUpload
  },
  created() {},
  methods: {
    // columnDrop() {
    //   const wrapperTr = document.querySelector('.el-table__header-wrapper tr');
    //   this.sortable = Sortable.create(wrapperTr, {
    //     animation: 180,
    //     delay: 0,
    //     onEnd: evt => {
    //       const oldItem = this.dropCol[evt.oldIndex];
    //       this.dropCol.splice(evt.oldIndex, 1);
    //       this.dropCol.splice(evt.newIndex, 0, oldItem);
    //     }
    //   });
    // },

    kong() {
      this.formInline.faqNo = '';
      this.formInline.faqName = '';
 
    },
    search() {
      this.loading = true;
      this.listQuery.current = 1;
      let data = {
        size: this.listQuery.size,
        current: this.listQuery.current,
        condition: {
          faqNo: this.formInline.faqNo,
          faqName: this.formInline.faqName,
      
        }
      };
      queryPrize(data).then(res => {
        this.loading = false;
        this.total = res.total;
        this.tableData = res.records;
      });
    },
    handledelete(v) {
      let data = {
        uuid: v.uuid,
        status:"0"
      };
      this.$confirm('确认删除吗？').then(_ => {
        deletePrize(data).then(res => {
          this.$message({
            showClose: true,
            message: res.message,
            type: res.code == 1 ? 'success' : 'error'
          });
          this.getDataList();
        });
      });
    },
    toAdd() {
      this.$router.push({
        name: 'commonproblemEdit',
        params: {}
      });
    },
    toEdit(item) {
      this.$router.push({
        name: 'commonproblemEdit',
        params: {
          edit: item,
          questionflag:false,

        }
      });
    },
        seedetail(item) {
      this.$router.push({
        name: 'commonproblemEdit',
        params: {
          edit: item,
           questionflag:true,
        }
      });
    },
    handleSizeChange(val) {
      this.listQuery.size = val;
      this.getDataList();
    },
    handleCurrentChange(val) {
      this.listQuery.current = val;
      this.getDataList();
    },

    getDataList() {
      let data = {
        size: this.listQuery.size,
        current: this.listQuery.current,
        condition: {
          status: 1
        }
      };
      queryPrize(data).then(res => {
        this.loading = false;
        this.total = res.total;
        this.tableData = res.records;
      });
    }
  }
};
</script>
<style lang="less" scoped>
.el-form-item .el-select {
  width: 100%;
}
</style>
